<template>
  <!-- v-model弹层组件封装 
  vue2: v-model语法糖（只能写一个） => :value="show" + @input="show=$event"
  vue3: v-model语法糖(合并了sync修饰符，支持写多个)
  v-model="show"(默认) 等价于 :model-value="show" + @update:model-value="show = $event"
  v-model:show（多个，类似vue2 sync修饰符写法） 等价于 :show="show" + @update:show="show = $event"
  -->
  <el-dialog v-model="show" v-model:show="show"></el-dialog>
  <!-- 父子通信 -->
  <!-- <el-dialog :model-value="show" @update:model-value="show = $event"></el-dialog> -->

  <p>
    <button @click="show = true">父组件打开弹层</button>
  </p>
  <div>
    <!-- 测试全局封装头组件 -->
    <!-- <cp-nav-bar title="登录" rightText="123" @click-right="clickRight" /> -->
    <h1 class="cp-boxs">测试页面</h1>
    <div class="test">测试页面2</div>
    <p style="font-size: 20px">行内样式转换vw失败</p>
    <ul>
      <li>{{ store.user.account }}</li>
      <li>
        <button @click="setUser">修改store数据</button>
      </li>
      <li></li>
    </ul>
    <!-- 测试vant组件自动引入 -->
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <!-- 测试登录 -->
    <div>
      <button @click="getUserInfo">获取用户信息</button>
      <button @click="login">登录</button>
    </div>

    <!-- 测试图标 -->
    <!-- 1. 默认使用方式=》不推荐 -->
    <!-- <img src="@/icons/home/doctor.svg" /> -->
    <!-- 2. 精灵图 -->
    <svg aria-hidden="true">
      <!-- #icon-文件夹名称-图片名称 -->
      <use href="#icon-home-doctor" />
    </svg>
    <!-- 3. 测试封装的精灵图组件 -->
    <div style="font-size: 18px">
      <cp-icon name="login-eye-on"></cp-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// import { useUserStore } from '@/stores/modules/user'
import { useUserStore } from '@/stores'
import { request } from '@/utils/request'
import type { User } from '@/types/user'
// 导入子组件
import ElDialog from './son.vue'

// 控制弹层显示隐藏
const show = ref(false)
const fn = (_show: boolean) => {
  console.log('子传父：', _show)
  show.value = _show
}

// 1. 测试pinia数据持久化
const store = useUserStore()
const setUser = () => {
  store.setUser({
    id: '123',
    avatar: '',
    account: 'nickname',
    mobile: '13899',
    token: '123'
  })
}
// 2. 测试request封装
// 测试，请求拦截器，是否携带token，响应拦截器401拦截到登录地址
const getUserInfo = async () => {
  const res = await request.get('/patient/myUser')
  console.log(res)
}
// 测试，响应拦截器，出现非10000的情况，和返回剥离后的数据
const login = async () => {
  const res = await request.post<any, User>('/login/password', {
    mobile: '13211112222',
    // 密码 abc123456 测试：出现非10000的情况
    password: 'abc12345'
  })
  store.setUser(res)
}

// 组件封装
const clickRight = () => {
  console.log('clickRight')
}
</script>

<style>
.test {
  width: 100px;
  height: 100px;
  font-size: 18px;
  color: var(--cp-font-color);
  background-color: red;
}
</style>
